<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
        <view class="header-content">
          <!-- 返回箭头 - 黑色尖括号样式 -->
          <view class="back-arrow" @click="goBack">
            <text class="arrow-icon">〈</text>
          </view>
          <!-- 标题文字 - 黑色无衬线字体 -->
          <text class="title">许愿墙</text>
        </view>
    </view>

    <!-- 导航标签 -->
    <view class="tabs">
      <text 
        :class="['tab', activeTab === 'makeWish' ? 'active-tab' : '']"
        @click="activeTab = 'makeWish'">我要许愿</text>
      <text 
        :class="['tab', activeTab === 'wishSquare' ? 'active-tab' : '']"
        @click="activeTab = 'wishSquare'">许愿广场</text>
    </view>

    <!-- 许愿页面 -->
    <view v-if="activeTab === 'makeWish'" class="wish-page">
      <text class="slogan">心诚则灵，愿启于心</text>
      
      <!-- 用户信息显示 -->
      <view class="form-group">
        <text class="label">您的姓名：</text>
        <text class="user-info">{{ userInfo.name }}</text>
      </view>
      
      <view class="form-group">
          <text class="label">您的性别：</text>
          <view class="gender-display">
            <text :class="['gender-option', genderText === '男' ? 'selected' : '']">男</text>
            <text :class="['gender-option', genderText === '女' ? 'selected' : '']">女</text>
          </view>
        </view>
      
        <!-- 心愿输入 -->
        <view class="wish-input-container">
            <textarea 
              class="wish-input" 
              placeholder="写下你的心愿..." 
              v-model="wishContent"
              maxlength="300"
            />
            <text class="char-count">{{ wishContent.length }}/300</text>
        </view>
      
        <view v-if="wishContent.length > 300" class="error-text">
        最多输入300字符
        </view>

    <!-- 显示选项 -->
    <view class="visibility">
        <text class="visibility-label">在许愿广场显示：</text>
        <view class="display-options">
            <text 
              :class="['display-option', showInSquare ? 'selected' : '']"
              @click="showInSquare = true"
            >显示</text>
            <text 
              :class="['display-option', !showInSquare ? 'selected' : '']"
              @click="showInSquare = false"
            >不显示</text>
          </view>
        </view>

      <!-- 提交按钮 -->
      <button class="submit-btn" @click="submitWish">我要许愿</button>
    </view>

    <!-- 许愿广场页面 -->
    <view v-if="activeTab === 'wishSquare'" class="square-page">
      <scroll-view class="wish-list" scroll-y>
        <view v-for="(wish, index) in wishList" :key="index" class="wish-card">
          <!-- 用户信息 -->
          <!-- <view class="wish-header">
            <text class="username">{{ wish.wishName }}：</text>
            <text class="wish-time">{{ wish.time }}</text>
          </view> -->
          
          <!-- 心愿内容 -->
          <text class="wish-content">{{ wish.wishContent }}</text>
          
          <!-- 助力区域 -->
          <view style="position: right: 10;" class="wish-footer" v-if="wish.supportCount !== null">
              <text class="support-count">已有{{ wish.supportCount }}人助你达成心愿</text>
              <button class="support-btn" @click="supportWish(index)">助TA达成心愿</button>
            </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue';
import { useWishStore } from '@/stores/wish';
import { useUserStore } from '@/stores/user';
import { redirect, switchTab } from '/utils/index.ts';
import { pageLink } from '/constants/link.ts';

const wishStore = useWishStore();
const userStore = useUserStore();

const wishList = computed(() => wishStore.wishList)

onMounted(async () => {
  await wishStore.list()
})

// 用户信息
const userInfo = computed(() => userStore.userInfo || '');
const genderText = computed(() => userInfo.value?.gender === 1 ? '男' : '女');

// 心愿内容
const wishContent = ref('');
const showInSquare = ref(true);
const activeTab = ref('makeWish');

// 提交心愿
const submitWish = async () => {
  if (wishContent.value.trim() === '') {
    uni.showToast({ title: '请输入您的心愿', icon: 'none' });
    return;
  }
  
  if (wishContent.value.length > 300) {
    uni.showToast({ title: '最多输入300字符', icon: 'none' });
    return;
  }
  
  try {
    await wishStore.add({
        wishContent: wishContent.value,
        display: true
    });
    
    uni.showToast({
      title: '心愿已许，静待回应。祝你如愿以偿。',
      icon: 'none',
      duration: 1500,
      success: () => {
        setTimeout(() => {
          switchTab(pageLink.blessings);
        }, 1500);
      }
    });
  } catch (error) {
    // uni.showToast({ title: '提交失败，请重试', icon: 'none' });
    // uni.showToast({
    //   title: '心愿已许，静待回应。祝你如愿以偿。',
    //   icon: 'none',
    //   duration: 1500,
    //   success: () => {
    //     setTimeout(() => {
    //       switchTab(pageLink.blessings);
    //     }, 1500);
    //   }
    // });
  }
};

// 返回功能
const goBack = () => {
  switchTab(pageLink.blessings);
};

// 助力心愿
const supportWish = (index) => {
  uni.showToast({
    title: '已助力心愿',
    icon: 'success'
  });
};
</script>

<style>
/* 导航栏容器 */
.header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1rpx solid #F5F5F5; /* 添加底部细线分隔 */
  margin-top: 48rpx;
}

/* 内容容器 */
.header-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
}

/* 返回箭头区域 */
.back-arrow {
  width: 80rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 点击区域测试 */
.back-arrow:active {
  background-color: rgba(0,0,0,0.1); /* 点击时变色 */
}

/* 箭头图标 */
.arrow-icon {
  font-size: 38rpx;
  color: #000000; /* 纯黑色 */
  transform: scale(1.2); /* 轻微放大使箭头更明显 */
}

/* 标题文字 - 匹配图片中的无衬线字体 */
.title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  color: #000000; /* 纯黑色 */
  font-weight: 500;
  margin-left: -60rpx; /* 使标题真正居中 */
}

.container {
  background-color: #FFFCF1;
  min-height: 100vh;
  padding: 20rpx;
}

.tabs {
  display: flex;
  border-bottom: 2rpx solid #eee;
  margin-bottom: 30rpx;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  font-size: 32rpx;
  color: #999;
}

.active-tab {
  color: #FF4D4F;
  position: relative;
}

.active-tab::after {
  content: '';
  position: absolute;
  bottom: -2rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 4rpx;
  background-color: #FF4D4F;
}

.gender-display {
  display: flex;
  margin-left: 20rpx;
}

.gender-option {
  padding: 8rpx 24rpx;
  margin-right: 16rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #F5F5F5;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.gender-option.selected {
  background-color: #FFFFFF;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.15);
  font-weight: bold;
}

.visibility {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.visibility-label {
  font-size: 28rpx;
  color: #444;
  margin-right: 20rpx;
}

.display-options {
  display: flex;
}

.display-option {
  padding: 8rpx 24rpx;
  margin-right: 16rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #F5F5F5;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.display-option.selected {
  background-color: #FFFFFF;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.15);
  font-weight: bold;
}

/* 许愿页面样式 */
.wish-page {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.slogan {
  display: block;
  text-align: center;
  font-size: 36rpx;
  color: #FF4D4F;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.form-group {
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
}

.label {
  font-size: 28rpx;
  color: #444;
  margin-right: 20rpx;
}

.user-info {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.wish-input-container {
  position: relative;
  margin-bottom: 30rpx;
}

.wish-input {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #EEEEEE;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  background: #FFFFFF;
}

.char-count {
  position: absolute;
  right: 20rpx;
  bottom: 10rpx;
  font-size: 24rpx;
  color: #999;
}

.error-text {
  color: #FF4D4F;
  font-size: 24rpx;
  margin-bottom: 20rpx;
}

.hint-text {
  display: block;
  text-align: center;
  font-size: 26rpx;
  color: #999;
  margin: 30rpx 0;
}

.radio-label {
  margin-right: 30rpx;
  font-size: 28rpx;
  color: #444;
  display: flex;
  align-items: center;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #FF4D4F;
  color: white;
  font-size: 32rpx;
  border-radius: 40rpx;
  border: none;
  margin-top: 20rpx;
}

/* 心愿广场样式 */
.square-page {
  padding-bottom: 40rpx;
}

.wish-list {
  height: calc(100vh - 240rpx);
}

.wish-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.wish-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.username {
  font-weight: bold;
  font-size: 34rpx;
}

.wish-time {
  color: #999;
  font-size: 28rpx;
}

.wish-content {
  font-size: 36rpx;
  line-height: 1.5;
  margin-bottom: 30rpx;
  white-space: pre-wrap;
}

.wish-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1rpx solid #F5F5F5; /* 浅灰色分隔线 */
  padding-top: 20rpx;
  margin-top: 20rpx;
}

.support-count {
  color: #999999; /* 灰色文字 */
  font-size: 28rpx;
}

.support-btn {
  background-color: #FF4D4F; /* 深红色按钮 */
  color: white;
  font-size: 28rpx;
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx; /* 圆角按钮 */
  border: none;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1); /* 轻微阴影 */
}

.support-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}
</style>